<template>
  <div class="contentMiddle">
    <div class="top">
        <div>
          <p>停车位总数/个</p>
          <div class="numberBox" v-for="item in totalNum">
            <div class="number">{{item}}</div>
          </div>
        </div>
        <div>
          <p>停车场总数/个</p>
          <div class="numberBox" v-for="item in totalPark">
            <div class="number">{{item}}</div>
          </div>
        </div>
        <div>
          <p>已用车位数/个</p>
          <div class="numberBox" v-for="item in useNum">
            <div class="number">{{item}}</div>
          </div>
        </div>
    </div>
    <div class="map">
      <div id="contentMap"></div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  let echarts = require('echarts/lib/echarts')
  import china from 'echarts/map/js/china.js'
  import hebei from 'echarts/map/js/province/hebei.js'
  // import shijiazhuang from 'echarts/map/js/hebei_city/shijiazhuang.js'
  export default {
    name: 'contentMiddle',
    props: ['map'],
    data() {
      return {
        totalNum: ['2','6','8','6','5'],
        totalPark: ['3','2','6'],
        useNum: ['2','3','2','1','3'],
        mapName: '石家庄',
        mapData:[
          {'name':'久富大厦停车场','latitude':38.247841, 'longitude':114.195824,  'color':'#0394d9'},
          {'name':'科技中心停车场','latitude':38.308659, 'longitude':114.382645,   'color':'#b42fd5'},
          {'name':'科技中心停车场','latitude':38.43832, 'longitude':114.552773,   'color':'#b42fd5'},
          {'name':'久富大厦停车场','latitude':38.34338, 'longitude':114.683838,  'color':'#0394d9'},
          {'name':'科技中心停车场','latitude':38.179234, 'longitude':114.976418,   'color':'#b42fd5'},
          {'name':'科技中心停车场','latitude':37.943241, 'longitude':115.217819,   'color':'#b42fd5'},
          {'name':'久富大厦停车场','latitude':38.026321, 'longitude':115.031204,  'color':'#0394d9'},
          {'name':'科技中心停车场','latitude':38.0215, 'longitude':114.846634,   'color':'#b42fd5'},
          {'name':'科技中心停车场','latitude':37.900661, 'longitude':114.648026,   'color':'#b42fd5'},
          {'name':'久富大厦停车场','latitude':38.085873, 'longitude':114.313438,  'color':'#0394d9'},
          {'name':'科技中心停车场','latitude':37.665642, 'longitude':114.38588,   'color':'#b42fd5'},
          {'name':'科技中心停车场','latitude':37.75631, 'longitude':114.776161,   'color':'#b42fd5'},
          {'name':'科技中心停车场','latitude':37.614933, 'longitude':114.611481,   'color':'#b42fd5'},
          {'name':'久富大厦停车场','latitude':37.766529, 'longitude':114.525597,  'color':'#0394d9'},
          {'name':'科技中心停车场','latitude':38.031963, 'longitude':114.145325,   'color':'#b42fd5'},
          {'name':'科技中心停车场','latitude':38.127983, 'longitude':114.60675,   'color':'#b42fd5'},
          {'name':'科技中心停车场','latitude':38.03647, 'longitude':114.53952,   'color':'#b42fd5','value':1900},
        ],
      }
    },
    mounted() {
      // this.getParkNum();
      if(this.map != '') {
        this.mapName = this.map;
      }
      this.drawMap();
      this.getParkNum1();//临时模拟假数据
    },
    methods: {
      getParkNum1() {
        let _self = this;
        setInterval(function() {
          _self.$axios({
            method: 'get',
            url: '/order/orderInfo/usedParking'
          }).then((res) => {
            _self.useNum = res.data.toString().replace(/(.)(?=[^$])/g, "$1,").split(",");
          })
        },2000)

      },
      getParkNum () {
        axios({
          method: 'post',
          url: '/api/bParkManage/getParkDataInfo',
          data: qs.stringify({type: 1})
        }).then((res) => {
          this.totalNum = res.data.data.total.toString().replace(/(.)(?=[^$])/g, "$1,").split(",");
          this.useNum = res.data.data.used.toString().replace(/(.)(?=[^$])/g, "$1,").split(",");
          this.totalPark = res.data.data.totalPark.toString().replace(/(.)(?=[^$])/g, "$1,").split(",");
        })
      },
      drawMap2() {
        var myChart = echarts.init(document.getElementById('contentMap'));
        var options = {
            series: [{
                type: 'map3D',
                map: '石家庄',
                name: '石家庄',
                boxDepth: 80, //地图倾斜度
                regionHeight: 3, //地图厚度
                //三维视觉属性
                itemStyle: {
                    opacity: 1, // 透明度
                    color: 'rgba(0,52,96,1)', //地图颜色
                    borderWidth: 0.5, //分界线宽度
                    borderColor: '#0394d9', //分界线颜色
                },
                // 鼠标hover高亮
                emphasis: {
                    label: {
                        show: true, //是否显示标签
                        textStyle: {
                            color: 'yellow', //高亮文字颜色
                            fontSize: 32,
                            fontFamily: '微软雅黑'
                        },
                        formatter: '{b}: {c}'
                    },
                },
                groundplane: {
                  show: false
                },
                shading: 'realistic',
                // 真实感材质相关配置 shading: 'realistic'时有效
                realisticMaterial: {
                    detailTexture: '#fff', // 纹理贴图
                    textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                    roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
                    metalness: 0, // 0材质是非金属 ，1金属
                    roughnessAdjust: 0
                },
                viewControl: {
                    distance: 90, // 地图视角 控制初始大小
                    rotateSensitivity: 1, // 旋转
                    zoomSensitivity: 1, // 缩放
                },
                // 标签设置
                // label: {
                //     show: true, //是否显示市
                //     // formatter: '{b} : test{c}',
                //     textStyle: {
                //         color: "#000", //文字颜色
                //         fontSize: 16, //文字大小
                //         fontFamily: '微软雅黑',
                //         opacity: 0,
                //         backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
                //     },
                // },

            }],
        }
        myChart.setOption(options);
      },
      drawMap2() {
        let _this = this;
        var myChartsMap = echarts.init(document.getElementById('contentMap'));
        myChartsMap.setOption({
           geo3D: {
            type: 'map3D',
            roam: false,
            show: true,
            map: this.mapName, //地图类型。
            //三维视觉属性
            itemStyle: {
                opacity: 1, // 透明度
                color: 'rgba(0,52,96,1)', //地图颜色
                borderWidth: 0.5, //分界线宽度
                borderColor: '#0394d9', //分界线颜色
            },
            label: {
              normal: {
                show: false,
                color:'#fff'
              },
              emphasis: {
                textStyle: {
                  show: false,
                  color: '#fff'
                }
              }
            },
            // itemStyle: {
            //   normal: {
            //     borderColor: '#0394d9',
            //     areaColor: 'rgba(0,52,96,1)',
            //   },
            //   emphasis: {
            //     areaColor: '#389BB7',
            //     borderWidth: 0
            //   },
            // },
            zoom:1.2,//放大比例

          },
          // tooltip:{
          //   show:true, //鼠标移入是否触发数据
          //   trigger: 'item', //出发方式
          //   formatter(params){
          //     let a = params.value;
          //     const b = '<span style="display:inline-block;height:100px;width:200px;border:1px solid rgb(32,195,248);border-radius: 6px;box-shadow: rgb(32,195,248) 0px 0px 12px 2px inset;">' + a +'</span>'
          //     return b
          //   }
          // },
          scatter3D: [{
            //根据经纬度在地图上描点
            type: 'scatter3D',
            coordinateSystem: 'geo',
            // animation: true,
            // rippleEffect: {
            //   brushType: 'stroke'
            // },
            // symbolSize: function (val,params) {
            //   return 30;
            // },

            data: this.mapData.map(function (itemOpt) {
              console.log(2222)
              return {
                // name: itemOpt.name,
                value: [
                  itemOpt.longitude,
                  itemOpt.latitude,
                  itemOpt.value //数量
                ],
                label: {
                  emphasis: {
                    position: 'right',
                    show: false
                  }

                },
                itemStyle: {
                  normal: {
                  // color: itemOpt.color //色值
                    // color: 'green'
                  }
                }
              };
            }),
            showAllSymbol: false,
            symbolSize: function (params) {
              if (params[2]) {
                return [75,45];
              }
              return [50,30];//描点的大小
            },
            // symbolSize: [50,30],
            symbol:'image://http://zmlmtc.zmzncs.com/upload/20200611/park.png'
          }]
        })
      },

      drawMap() {
        let _this = this;
        var myChartsMap = echarts.init(document.getElementById('contentMap'));
        myChartsMap.setOption({
           geo: {
            type: 'map',
            roam: false,
            map: this.mapName, //地图类型。
            label: {
              normal: {
                show: false,
                color:'#fff'
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#0394d9',
                areaColor: 'rgba(0,52,96,1)',
              },
              emphasis: {
                areaColor: '#389BB7',
                borderWidth: 0
              },
            },
            zoom:1.2,//放大比例

          },
          // tooltip:{
          //   show:true, //鼠标移入是否触发数据
          //   trigger: 'item', //出发方式
          //   formatter(params){
          //     let a = params.value;
          //     const b = '<span style="display:inline-block;height:100px;width:200px;border:1px solid rgb(32,195,248);border-radius: 6px;box-shadow: rgb(32,195,248) 0px 0px 12px 2px inset;">' + a +'</span>'
          //     return b
          //   }
          // },
          series: [{
            //根据经纬度在地图上描点
            type: 'scatter',
            coordinateSystem: 'geo',
            // animation: true,
            // rippleEffect: {
            //   brushType: 'stroke'
            // },
            // symbolSize: function (val,params) {
            //   return 30;
            // },

            data: this.mapData.map(function (itemOpt) {
              console.log(2222)
              return {
                // name: itemOpt.name,
                value: [
                  itemOpt.longitude,
                  itemOpt.latitude,
                  itemOpt.value //数量
                ],
                label: {
                  emphasis: {
                    position: 'right',
                    show: false
                  }

                },
                itemStyle: {
                  normal: {
                  // color: itemOpt.color //色值
                    // color: 'green'
                  }
                }
              };
            }),
            showAllSymbol: false,
            symbolSize: function (params) {
              if (params[2]) {
                return [75,45];
              }
              return [50,30];//描点的大小
            },
            // symbolSize: [50,30],
            symbol:'image://http://zmlmtc.zmzncs.com/upload/20200611/park.png'
          }]
        })
      }
    }
  }
</script>
<style scoped>
  .top {
    display: flex;
    justify-content: space-around;
    /* margin-top: 20px; */
  }
  .top div {
    display: inline-block;
    text-align: center;
  }
  .top div p {
    color: #fff;
    font-size: 2.4rem;
    font-family: FZZHJW--GB1-0;
    margin-bottom: 14px;
  }
  .numberBox {
    justify-content: center;
  }
  .number {
    height: 4rem;
    width: 4rem;
    background-image: url(../../../assets/number.png);
    background-size: 100% 100%;
    color: #05FEF5;
    font-size: 2.6rem;
    line-height: 4rem;
    font-weight: bolder;
    /* font-family: FZLTTHJW--GB1-0; */
  }
  .map {
    width: 88.14%;
    /* height: 48.02%; */
    /* height: 68%; */
    height: 58%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24.04%;
  }
   #contentMap {
     display: inline-block;
     height: 100%;
     width: 100%;
   }

</style>
